<template>
  <div class="app-container">
    <el-card>
      <el-tabs v-if="userInfo.username" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="登录账户设置" name="first">
          <setLogin :user-info="userInfo" />
        </el-tab-pane>
        <el-tab-pane label="个人详情" name="second">
          <i class="el-icon-printer" @click="setIsDone('personal')" />
          <Info :user-info="userInfo" :total="total" />
        </el-tab-pane>
        <el-tab-pane label="岗位信息" name="third">
          <i class="el-icon-printer" @click="setIsDone('personal2')" />
          <div>
            岗位信息
          </div>
        </el-tab-pane>
      </el-tabs>
      <div v-else>用户信息获取失败</div>
    </el-card>
  </div>

</template>

<script>
import { getUser } from '@/api/employees'
import setLogin from './components/setLogin'
import Info from './components/info'
export default {
  components: {
    setLogin,
    Info
  },
  props: ['id', 'total'],
  data() {
    return {
      activeName: 'first',
      userInfo: {}
    }
  },
  async created() {
    const result = await getUser(this.id)
    console.log(result)
    this.userInfo = result
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    setIsDone(type) {
      this.$router.push({
        path: `/employees/work/${this.id}`,
        query: {
          type
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.setLogin{
  width: 500px;
  margin: 20px 100px;
}
::v-deep .el-icon-printer{
  float: right;
  margin-right: 30px;
}
</style>
